<template>
    <div class="product-detail">
        <h1>商品详情</h1>
        <div class="f-s" style='align-items:flex-start;'>
            <div>
                <div class="demo-wrapper">
                    <template v-if="detailImgs.length">
                        <img :src="`${IMG_HOST}${item}`" alt="" v-for="(item, index) in detailImgs" :key='index'>
                    </template>
                    <template v-else>
                        <p>请点击右侧按钮上传图片</p>
                    </template>
                </div>
            </div>
            <o-upload multiple v-model='detailImgs'></o-upload>
        </div>
    </div>
</template>

<script>
    import {toast} from '@u'
    export default {
        props : {
            productInfo : {
                type : Object,
                default : _ => {}
            }
        },
        watch : {
            productInfo : {
                handler : function (n) {
                    if (n.id) {
                        this.detailImgs = n.content;
                    }
                }
            }
        },
        data () {
            return {
                detailImgs : []
            }
        },
        methods : {
            getProductDetails () {
                if (!this.detailImgs.length) {
                    return false;
                }
                return this.detailImgs;
            }
        }
    }
</script>

<style lang='less' scoped>
    .product-detail {
        margin-top: 15px;
        padding: 15px;
        background: #f5f5f5;
        h1 {
            margin-bottom: 10px;
        }
        .demo-wrapper {
            width: 350px;
            height: 450px;
            overflow-y: scroll;
            background: #fff;
            margin-right: 30px;
            img {
                width: 100%;
            }
        }
    }
</style>